<template>
  <div>
    <el-dialog :title="title" :visible.sync="openadd" width="33%">
      <!-- 编辑的区域 -->
      <div class="flex-between">
        <div>
          <div class="t1">
            <span>商品id:</span>
          </div>

          <el-input placeholder="请输入商品iid" prefix-icon="el-icon-star-off" v-model="goodsdetail.goods_id"
            style="width: 180px" />
        </div>
        <div>
          <span class="t1">商品类型:</span>
          <el-select v-model="goodsdetail.goods_type" placeholder="请选择商品类型" style="width: 180px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>

      <div class="flex-between" style="margin-top: 25px">
        <div>
          <span class="t1">商品标题:</span>
          <el-input placeholder="请输入商品标题" prefix-icon="el-icon-tickets" v-model="goodsdetail.goods_name"
            style="width: 180px" />
        </div>
        <div style="margin-left: 30px">
          <span class="t1">商品库存:</span>
          <el-input placeholder="请输入商品库存" prefix-icon="el-icon-star-off" v-model="goodsdetail.goods_kucun"
            style="width: 180px" />
        </div>
      </div>

      <div class="flex-between" style="margin-top: 25px">
        <div>
          <span class="t1">商品价格:</span>
          <el-input placeholder="请输入商品价格" prefix-icon="el-icon-star-off" v-model="goodsdetail.goods_price"
            style="width: 180px" />
        </div>
        <div>
          <span class="t1">商品体重/g:</span>
          <el-input placeholder="请输入商品体重" prefix-icon="el-icon-tickets" v-model="goodsdetail.goods_weight"
            style="width: 180px" />
        </div>
      </div>
      <div class="flex-between" style="margin-top: 25px">
        <div>
          <span class="t1">商品首页图片:</span>
          <el-input placeholder="请输入商品图片地址" prefix-icon="el-icon-tickets" v-model="goodsdetail.goods_small_logo"
            style="width: 490px" />
        </div>
      </div>

      <div class="flex-between" style="margin-top: 25px">
        <div>
          <span class="t1">商品顶部轮番:</span>
          <el-input placeholder="请输入商品轮番图片地址" prefix-icon="el-icon-tickets" v-model="goodsdetail.goods_pics"
            style="width: 490px" />
        </div>
      </div>

      <div class="flex-between" style="margin-top: 25px">
        <div>
          <span class="t1">商品详情图:</span>
          <el-input placeholder="请输入商品轮番图片地址" prefix-icon="el-icon-tickets" v-model="goodsdetail.goods_introduce"
            style="width: 490px" />
        </div>
      </div>

      <!-- <div>
        <myEditor ref="myEditor"></myEditor>
      </div> -->

      <span slot="footer" class="dialog-footer">
        <el-button @click="openadd = false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </span>
      <!-- 编辑结束 -->
    </el-dialog>
  </div>
</template>

<script>
import myEditor from '../cpmponent/tinymce .vue';
export default {
  data() {
    return {
      content: '',
      options: [
        {
          value: "1",
          label: "时尚女装",
        },
        {
          value: "2",
          label: "户外运动",
        },
        {
          value: "3",
          label: "箱包配饰",
        },
      ],
      setting: {
        height: 500
      },
      openadd: false,
      goodsdetail: {
        goods_id: '',
        goods_name: '',
        goods_price: '',
        goods_kucun: '',
        goods_small_logo: '',
        goods_type: '',
        goods_pics: '',
        goods_introduce: ''
      }
    };
  },
  props: {
    title: ''
  },
  components: {
    myEditor
  },
  methods: {
    setup(editor) {
      console.log(editor)
    },
    // 编辑选择框改变的
    open(goodsdetail) {
      this.openadd = true
      this.goodsdetail = goodsdetail
    },
    close() {
      this.openadd = false;
    },
    sure() {
      if (this.title == "编辑商品") {
        this.changegoodsdetail()
      }
      if (this.title == "增加商品") {
        this.addgoodsdetail()
      }

    },
    async changegoodsdetail() {
      let res = await this.$axios.post(this.$IP + '/changegoodsdetail', this.goodsdetail)
      this.$message.success('修改商品成功！')
      this.close()
      this.$emit('gengxin')
    },
    async addgoodsdetail() {
      let res = await this.$axios.post(this.$IP + '/addgoodsdetail', this.goodsdetail)
      this.$message.success('增加商品成功！')
      this.close()
      this.$emit('gengxin')

    }



  }
};
</script>

<style lang="less">
.tbox {
  margin-bottom: 20px;
}

.w {
  width: 190px;
}

.t1 {
  display: inline-block;
  color: #545c64;
  font-weight: bold;
  width: 90px;
}
</style>